<template>
  <div class="banner">
    <img v-for="(v, i) in imgData" :key="i" :src="`/src/assets/img/${v}`" v-show="n === i" />
    <div class="banner-circle">
      <ul>
        <li v-for="(v, i) in imgData" :key="i" :class="{ selected: n === i }"></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

// const imgData = ref(["1.jpg", "2.jpg", "3.jpg"]);

const $props = defineProps({
  imgData: {
    type: Array,
    default: () => [],
    required: true,
  },
});
const n = ref(0);
let timer = null;

const autoPlay = () => {
  timer = setInterval(() => {
    n.value++;
    if (n.value === $props.imgData.length) {
      n.value = 0;
    }
  }, 2000);
};
onMounted(() => {
  autoPlay();
});

onUnmounted(() => {
  timer && clearInterval(timer);
});
</script>

<style>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.banner {
  position: relative;
  width: 800px;
}
.banner .banner-circle {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  color: #fff;
}
.banner .banner-circle li {
  display: inline-block;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: 6px;
  margin: 4px;
}
.banner .banner-circle ul {
  text-align: center;
}
.banner .banner-circle .selected {
  background: #ff304e;
}
.banner img {
  width: 100%;
  margin: 0;
  padding: 0;
}
</style>
